<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common" th:with="title='主页'">
</head>
<link rel="stylesheet" th:href="@{/css/city/hzw-city-picker.css}">
<!-- city select js -->
<script th:src="@{/plugins/city/city-data.js}"></script>
<script th:src="@{/plugins/city/hzw-city-picker.min.js}"></script>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <div th:include="main-header"></div>

    <div class="content-wrapper">
        <section class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="box box-solid">
                        <div class="box-header with-border">
                            <i class="fa  fa-home"></i>

                            <h3 class="box-title">
                                欢迎：<span
                                    data-th-text="${session.loginUser} != null ? (${session.loginUser.username} != null ? ${session.loginUser.username} : '暂无') : '暂无'"></span>
                            </h3>
                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <div class="row">
                                <div class="col-sm-12">
                                    <i class="fa fa-map-marker"></i>&nbsp;<span
                                        id="locationCity">成都</span>&nbsp;<input
                                        readonly type="text" id="cityChoice"
                                        style="width: 35px; color: blue; border: none;" value="切换"/>
                                    <input readonly type="text" id="tmpCity"
                                           style="border: none; display: none;" value="成都"/>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12"></div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <span id="numDayInfo"></span>&nbsp;&nbsp;&nbsp;<span id="warn"
                                                                                         style="color: red;"></span>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-6">
                                    <span>今天白天：</span><span id="status1"></span>
                                </div>
                                <div class="col-sm-6">
                                    <span>最高温度:</span><span id="temperature1" style="color: red;"></span><span>℃
										</span>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <span>今天夜间：</span><span id="status2"></span>
                                </div>
                                <div class="col-sm-6">
                                    <span>最高低温:</span><span id="temperature2" style="color: blue;"></span><span>℃
										</span>
                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- ./col -->
            </div>
            <!-- /.row -->


        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <div th:include="main-footer"></div>
</div>
<script type="text/javascript">
    $(function () {
        init();
    });

    //初始化
    function init() {
        daytime();
        doCityChoice();

    }

    //日期
    function daytime() {
        var array = new Array("日", "一", "二", "三", "四", "五", "六");
        var oDate = new Date(); //实例一个时间对象；
        var week = oDate.getDay();
        var str = "星期" + array[week];
        oDate.getFullYear(); //获取系统的年；
        oDate.getMonth() + 1; //获取系统月份，由于月份是从0开始计算，所以要加1
        oDate.getDate(); // 获取系统日，

        $("#numDayInfo").html(
            oDate.getFullYear() + "年" + (oDate.getMonth() + 1) + "月"
            + oDate.getDate() + "日 " + "&nbsp;&nbsp;&nbsp;"
            + str);
    }

    //初始化城市选择器
    var cityPicker = new HzwCityPicker({
        data: data,
        target: 'cityChoice',
        valType: 'k-v',
        hideCityInput: {
            name: 'city',
            id: 'city'
        },
        hideProvinceInput: {
            name: 'province',
            id: 'province'
        },
        callback: function () {
            doCityChoice();
        }
    });
    cityPicker.init();

    //获得天气信息和角色
    function doCityChoice() {
        var city = $("#cityChoice").val();
        if ($("#cityChoice").val() == "" || $("#cityChoice").val() == "切换") {
            city = "成都";
        }
        $.ajax({
            url: '/commonsWeather/getWeather',
            type: "post",
            data: {
                "city": city
            },
            async: false,
            success: function (data) {
                var obj = eval(data);
                $("#cityChoice").val("切换");
                $("#locationCity").html(obj[0].city);
                $("#status1").html(obj[0].status1);
                $("#temperature1").html(obj[0].temperature1);
                $("#status2").html(obj[0].status2);
                $("#temperature2").html(obj[0].temperature2);
                if (obj[0].city == null) {
                    $("#warn").html("暂无该城市天气信息");
                    $("#warn").show();
                } else if (obj[0].temperature1 >= 35) {
                    $("#warn").html("白天，天气炎热，请注意防暑");
                    $("#warn").show();
                } else if (obj[0].temperature2 <= 10) {
                    $("#warn").html("夜晚，天气寒冷，请注意防寒");
                    $("#warn").show();
                } else if (obj[0].temperature1 >= 35
                    && obj[0].temperature2 <= 10) {
                    $("#warn").html("昼夜温差大，白天请注意防暑，夜晚请注意防寒");
                    $("#warn").show();
                } else {
                    $("#warn").hide();
                }
            }
        });
    }
</script>
</body>
</html>